<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./bulma.css">
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <section class="hero is-dark">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            待办事项列表
          </h1>
          <h2 class="subtitle">
            今天的事情今天做，明天才有时间做更多的事情
          </h2>
        </div>
      </div>
    </section>
    <div class="container is-widescreen" style="margin: 30px auto;">
      <div class="columns">
        <div class="column is-one-quarter">
          <input
            type="text"
            placeholder="输入代办事项名称"
            class="input"
            v-model="inputValue"
            @keyup.13="addTodo"
          >
        </div>
        <div class="column is-one-quarter">
          <button @click="addTodo" class="button is-primary">添加</button>
        </div>
      </div>
    </div>
    <div class="container is-widescreen">
      <div class="columns is-multiline">
        <div
          class="column is-one-quarter"
          v-for="todo in todos"
          :key="todo.id"
        >
          <div class="card">
            <header class="card-header">
              <p class="card-header-title">
                代办事项
              </p>
              <a href="#" class="card-header-icon" aria-label="more options">
                <button class="delete" @click="removeTodo(todo.id)"></button>
              </a>
            </header>
            <div class="card-content">
              <div class="content">
                {{todo.title}}
              </div>
            </div>
            <footer class="card-footer">
              <a
                href="javascript:;"
                :class="['card-footer-item', todo.hasFinished ? 'has-text-success' : 'has-text-danger']"
              >
                {{ todo.hasFinished ? '已完成' : '未完成' }}
              </a>
              <a href="javascript:;" class="card-footer-item" @click="toggleHasFinished(todo.id)">
                切换为{{ todo.hasFinished ? '未' : '已' }}完成
              </a>
            </footer>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        inputValue: '',
        todos: [
          {
            id: 1,
            title: '吃饭',
            hasFinished: true
          },
          {
            id: 2,
            title: '睡觉',
            hasFinished: false
          },
          {
            id: 3,
            title: '写代码',
            hasFinished: false
          }
        ]
      },
      methods: {
        toggleHasFinished (id) {
          this.todos = this.todos.map(todo => {
            if (todo.id === id) todo.hasFinished = !todo.hasFinished
            return todo
          })
        },
        removeTodo (id) {
          this.todos = this.todos.filter(todo => {
            return todo.id !== id
          })
        },
        addTodo () {
          if (this.inputValue === '') return
          this.todos.push({
            id: Date.now(),
            title: this.inputValue,
            hasFinished: false
          })
          // 吧input清空
          this.inputValue = ''
        }
      }
    })
  </script>
</body>
</html>
